<template>
  <div>
     <!-- 面包屑导航 -->
   <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/member/vlist' }">
        <i class="el-icon-s-custom"></i> 
        会员管理
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>分组设置</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  -->
    <div class="msj_fenzu">
      <el-button type="primary" size="small" @click="addfenzu" style="margin: 15px 0;">添加分组</el-button>
      <el-table
    :data="viplist"
    border
    style="width: 100%">
    <el-table-column
      prop="bqian"
      label="标签名称"
      width="240">
    </el-table-column>
    <el-table-column
      prop="vipnums"
      label="会员数"
     >
    </el-table-column>
    <el-table-column
      prop="bqtext"
      label="标签描述"
     >
    </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">添加会员</el-button>
        <el-button @click="delClick(scope.row)" type="text" size="small">删除组别</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加分组 -->
  <el-dialog title="添加标签组" :modal="false"  width="50%" :visible="dialogFormVisible">
  <el-form  :model="form" :rules="rules" ref="form">
    <el-form-item label="标签名称" :label-width="formLabelWidth" prop="bqian">
      <el-input v-model="form.bqian" maxlength="6" :keyup="form.bqian=form.bqian.replace(/[^\w\u4E00-\u9FA5]/g, '')" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="标签描述" :label-width="formLabelWidth">
      <el-input
  type="textarea"
  :autosize="{ minRows: 5, maxRows: 8}"
  placeholder="请输入内容"
  v-model="form.bqtext">
</el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="closefenzu">取 消</el-button>
    <el-button type="primary" @click="addvipfen">确 定</el-button>
  </div>
</el-dialog>
<!-- 遮罩层 -->
<div class="zhezhao" v-show="dialogFormVisible">

</div>
    </div>
  </div>
</template>
<script>
import {getmsjvipfenzu,addmsjvipfenzu,delmsjvipfenzu} from '../../utils/api'
export default{
  data(){
    return {
      viplist:[],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      form:{
        bqian:"",
        bqtext:""
      },
      rules: {
        bqian: [
            { required: true, message: '请填写标签名称', trigger: 'change' }
          ]
        }
    }
  },
  created(){
    this.getfenfu()
  },
  methods:{
    
    getfenfu(){
      getmsjvipfenzu().then(res=>{
      if(res.status==200){
        this.viplist=res.data.data
      }
    })
    },
    // 打开添加分组
    addfenzu(){
      this.dialogFormVisible = true
    },
    // 关闭添加分组
    closefenzu(){
      this.dialogFormVisible = false
    },
    // 添加分组 
    addvipfen(){
      if(this.form.bqian==""){
        this.$message.error('标签名称必须填');
      }else{
        addmsjvipfenzu(this.form).then(res=>{
          if(res.status==200){
            this.$message({
                  message: '添加成功',
                  type: 'success'
                  });
            this.getfenfu()
            this.closefenzu()
            this.form.bqian=""
            this.form.bqtext=""
          }
        })
      }
    },
    // 删除分组
    delClick(v){
      delmsjvipfenzu(v.id).then(res=>{
        if(res.status==200){
            this.$message({
                  message: res.data.msg,
                  type: 'success'
                  });
            this.getfenfu()
          }
      })
    },
    // 跳转添加会员 
    handleClick(v){
      this.$router.push({
        name:'addvips',
        params:{
          detail:v
        }
      })
      sessionStorage.setItem('vipdetail',JSON.stringify(v))
    }
  }
}
</script>
<style scoped>
*{
  margin: 0;
}
  .msj_fenzu{
    width: 100%;
  }
  .zhezhao{
    position: fixed;
    top: 0;left: 0;
    opacity: 0.5; width: 100vw;
    height: 100vh;
    background: #333;
    z-index: 1000;
  }
  .el-form-item{
    margin: 0 0 15px;
  }
</style>